<html layout:decorate="~{diagnostic/diagnostic_layout}" xmlns:layout="http://www.w3.org/1999/xhtml">
<body>
<div layout:fragment="content_diagnostic">
    <div class="search_condition_block" id="btn">
        <div style="margin-top: 5px">
            <label style="width: 80px;margin-left: 15px">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间:</label>
            <div id="time" class="btn-group btn-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-success active" name="createTime">今天</button>
                <button type="button" class="btn btn-success" name="yestoday">昨天</button>
                <button type="button" class="btn btn-success" name="week">本周</button>
                <button type="button" class="btn btn-success" name="month">本月</button>
                <button type="button" class="btn btn-success" delay="false">自定义</button>
                <div style="display: inline-block" id="time_select">
                    <input class="form_date"
                           style="height: 30px; background-color: white !important; border-radius: 5px !important"
                           type="text" placeholder="开始时间"
                           id="start_time_select" data-link-field="start_time" data-link-format="yyyy-mm-dd"
                           readonly>
                    <span>至</span>
                    <input class="form_date"
                           style="height: 30px; background-color: white !important; border-radius: 5px !important"
                           type="text" placeholder="结束时间"
                           id="end_time_select" data-link-field="end_time" data-link-format="yyyy-mm-dd"
                           readonly>
                    <input type="hidden" id="start_time" name="start_time">
                    <input type="hidden" id="end_time" name="end_time">
                </div>
            </div>
            <input type="text" class="search-data-child" id="Q_LIKE_equipmentName" name="Q_LIKE_equipmentName" placeholder="搜索设备名称"
                   style="margin-left: 10px" />
            <button type="button" id="search-btn" onclick="alarmSearch('dataTable')"  class="btn btn-primary btn-sm"
                    style="margin-left: 10px" >搜索
            </button>
        </div>

        <!--<div style="margin-top: 5px;display: flex;">
            <div style="margin-top: 5px;">
                <label style="width: 80px;margin-left: 15px">筛选条件:</label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox1" value="0" onclick="alarm(this.value=(this.value==0)?1:0)"> 触发报警
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox2" value="0" onclick="alarmThreshold(this.value=(this.value==0)?2:0)"> 修改BMS报警阈值
                </label>
            </div>
        </div>-->
    </div>

    <div class="main-body">
        <table id="dataTable" data-url="diagnostic_data" data-page-list=[] data-striped="true"
               data-pagination="true"
               data-page-size="15" data-cache="false">
        </table>
    </div>

    <style>
        .btn-group-sm .active {
            background-color: #006dcc !important;
            border-color: #006dcc !important;
        }
    </style>
    <script>
        /*********筛选条件(报警)*******/
        function alarm() {
            var condition = [];
            var url = "/diagnostic/condition_queryDiagnostic";
            var option1 = $("#inlineCheckbox1").val();
            var option2 = $("#inlineCheckbox2").val();
            if(option1=="1"){
                $("button.active").each(function () {
                    condition.push($(this).attr("name"))
                });
                condition.push(option1);
                if(option2=="2"){
                condition.push(option2);
                }
                console.log(condition)
                $("#dataTable").bootstrapTable('refresh', {url: url + "?condition=" + condition});
            }
        }

        /*********筛选条件(阈值)*******/
       function alarmThreshold() {
            var condition = [];
            var url = "/diagnostic/condition_queryDiagnostic";
            var option2 = $("#inlineCheckbox2").val();
            var option1 = $("#inlineCheckbox1").val();
            if(option2=="2"){
                $("button.active").each(function () {
                    condition.push($(this).attr("name"))
                });
                condition.push(option2);
                if(option1=="1"){
                    condition.push(option1)
                }
                console.log(condition)
                $("#dataTable").bootstrapTable('refresh', {url: url + "?condition=" + condition});
            }
        }


        /****时间筛选按钮****/
        var startTime, endTime;
        $("#start_time_select").datetimepicker({
            bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
            startView: 2,
            format: "yyyy-mm-dd",
            minView: "month",
            todayBtn: "linked",
            todayHighlight: true,
            language: "zh-CN",
            showMeridian: true,
            autoclose: true,
            endDate: new Date()
        }).on('changeDate', function (ev) {
            var starttime = $("#start_time_select").val();
            startTime = starttime;
            $("#end_time_select").datetimepicker('setStartDate', starttime);
        });

        $("#end_time_select").datetimepicker({
            bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
            startView: 2,
            format: "yyyy-mm-dd",
            minView: "month",
            todayBtn: "linked",
            todayHighlight: true,
            language: "zh-CN",
            autoclose: true,
            showMeridian: true,
            endDate: new Date()
        }).on('changeDate', function (ev) {
            var endtime = $("#end_time_select").val();
            endTime = endtime;
            $("#start_time_select").datetimepicker('setEndDate', endtime);
            // console.log(startTime + endTime)
            if (startTime && endTime != null) {
                var condition = [];
                condition.push(startTime);
                condition.push(endtime);
                var url = "/diagnostic/condition_queryDiagnostic";

                $("#dataTable").bootstrapTable('refresh', {url: url + "?condition=" + condition});

            }


        });

        $("#system_start_time").datetimepicker({
            bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
            startView: 2,
            format: "yyyy-mm-dd",
            minView: "month",
            todayBtn: "linked",
            todayHighlight: true,
            language: "zh-CN",
            autoclose: true,
            showMeridian: true
        });
        $("#time_select").hide();

        $('.search_condition_block .btn-group-sm button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
            if ($(this).parent().attr('id') == 'time' && ($(this).val() == null || $(this).val() == '') && $(this).text() == '自定义') {
                $("#time_select").show();
                $("#start_time_select").val('');
                $("#end_time_select").val('');
            } else {
                $("#time_select").hide();
                $('#dataTable').bootstrapTable('refreshOptions', {pageNumber: 1});
            }
        });
        $('#search-btn').click(function (e) {
            $('#dataTable').bootstrapTable('refreshOptions', {pageNumber: 1});
        });

        /****按钮活跃****/
        $('#time button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
        });

        //table字段
        var dataFormat = [{
            field: 'id',
            title: 'id',
            visible: false
        }, {
            field: 'createTime',
            title: '诊断时间',
            align: 'center',
            formatter: function (value, row, index) {
                return formatTimeStrap(value);
            }
        }, {
            field: 'equipment.name',
            title: '诊断设备',
            align: 'center'
        }, {
            field: 'batch.typeId',
            title: '诊断算法',
            align: 'center'
        }, {
            field: 'setVal',
            align: 'center',
            title: '诊断内容'
        },{
            field: 'resultVal',
            align: 'center',
            title: '诊断结果'
        },
            /**
            {
            field: 'isAlarm',
            align: 'center',
            title: '是否触发报警',
            formatter: formatAlarmStatus
        }, **/
            {
            field: 'isAlarmThreshold',
            align: 'center',
            title: '是否建议修改报警阈值',
            formatter: formatThresholdStatus
        }];

        //报警状态
        function formatAlarmStatus(value, row, index) {
            var html = '';
            if (value == 1) {
                html += '<input type="checkbox">'
            }

            if (value == 2) {
                html += '<input type="checkbox" checked="checked">'
            }

            html += '<a  href="/alarm/alarm_list">详细</a>';
            return [html].join('');
        }

        //报警阈值
        function formatThresholdStatus(value, row, index) {
            var html = '';
            if (value == 1) {
                html += '<input type="checkbox">'
            }

            if (value == 2) {
                html += '<input type="checkbox" checked="checked">'
            }

            html += '<a  href="/alarm/threshold_manager">详细</a>';
            return [html].join('');


        }

        //初始化table
        window.onload = function () {
            getTable("search-data-child", dataFormat, "dataTable");
        };

/**************************************************搜索设备&&筛选&&自定义按钮***************************************************/
        function getTable(searchClass, dataFormat, id) {
            $("#" + id).bootstrapTable({
                method: "get",
                sidePagination: "server",
                dataType: "json",
                queryParams: function queryParams(params) {   //设置查询参数
                    // 定义数组用于装筛选条件
                    var condition = [];
                    var url = "/diagnostic/condition_queryDiagnostic";
                    var param = {
                        pageNum: params.offset / params.limit,
                        equipmentName : $("#Q_LIKE_equipmentName").val()
                    };
                    $("." + searchClass).each(function () {
                        var key = $(this).attr("name");
                        var val = $(this).val();
                        param[key] = val;
                    });

                    $("#btn button:not([delay='false'])").unbind("click").bind("click",function () {
                        //绑定动态按钮
                        $(this).addClass('active').siblings().removeClass('active');
                        condition.splice(0,condition.length);
                        // 定义数组用于装筛选条件
                        $("button.active").each(function () {
                            condition.push($(this).attr("name"))
                        });
                        $("#" + id).bootstrapTable('refresh', {url: url + "?condition=" + condition});
                        return condition;
                    });
                    return param;
                },
                columns: dataFormat
            });
        }

        function alarmSearch(id) {
            $("#" + id).bootstrapTable("selectPage", 1);
        }
    </script>
</div>
</body>
</html>